<template>
	<view>
		<view class="top">
			<image :src='picUrl' mode=""></image>
			<view class="wenzi">
				<view class="">
					{{dataList.title}}
				</view>
				<view class="">
					价格 <span style="color: #ED783D;">￥{{originPrice.toFixed(2)}}</span>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="middleList" @click="toAddressList">
				<view class="text">
					服务地址
				</view>
				<view class="text2">
					{{serviceAddress}}<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</view>
			<view class="middleList" @click="toAdrchivesList">
				<view class="text">
					被护理人信息
				</view>
				<view class="text2">
					{{archives}}<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</view>
			<view class="middleList" @click="showPop">
				<view class="text">
					情况描述
				</view>
				<view class="text2" v-if="reason">
					{{reason}}<uni-icons type="right" color="#999999"></uni-icons>
				</view>
				<view class="text2" v-else>
					必填可以告诉我们您的<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <popCard :type='type' :status='status' :infoList="infoList" @tabtap="tabtap"></popCard> -->

		<view style="height: 100rpx;" class="middle" @click="showPicker">
			<view class="middleList">
				<view class="text">
					预约服务时间
				</view>
				<view class="text2">
					{{serviceDate}}<uni-icons type="right" color="#999999"></uni-icons>
				</view>

			</view>
		</view>
		<!-- <view class="middle">
			<view class="middleList">
				<view class="text">
					选择服务人员
				</view>
				
			</view>
			<view class="middleList">
				<view class="text">
					护士
				</view>
				<view style="width: 200rpx;color: black;" class="text2">
					预估288/次
				</view>
			</view>	
		</view> -->
		<view style="height: 100rpx;" class="middle">
			<view class="middleList">
				<view class="text">
					购买次数
				</view>

				<view class="text3">
					<view @click="decrease" class="increase">
						-
					</view>
					<span>&nbsp;&nbsp;</span>

					<span>{{ count }}</span>
					<span>&nbsp;&nbsp;</span>

					<view @click="increase" class="increase">
						+
					</view>
					<span>&nbsp;&nbsp;</span>
					次
				</view>
			</view>
		</view>
		<view :style="'height:'+(120+80*payPersonIndex)+'rpx;'" class="middle">
			<view style="padding: 10rpx 0rpx 0rpx 0rpx;" class="middleList">
				<view class="text" style="font-size: 28rpx;">
					{{package.name}}:
				</view>
				<view>
					<radio-group style="display: flex;width: 520rpx;margin-top: 20rpx;" @change="payPersonRadioChange">
						<label class="radio-label">
							<view class="radio-item">
								<radio :value="0" color="#FF6000" :checked="0 == payPersonIndex?true:false" />
							</view>
							<view class="text-container">
								<text :class="[0 == payPersonIndex ? 'fontcolour' : '']">不需要</text>
								&nbsp;&nbsp;&nbsp;&nbsp;
							</view>
						</label>
						<label class="radio-label">
							<view class="radio-item">
								<radio :value="1" color="#FF6000" :checked="1 == payPersonIndex?true:false" />
							</view>
							<view class="text-container">
								<text :class="[1 == payPersonIndex ? 'fontcolour' : '']">需要 ￥{{package.amount}}</text>
								&nbsp;&nbsp;&nbsp;&nbsp;
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view v-if="payPersonIndex==1" style="text-align: center;margin: 20rpx;background-color: #edeef1;padding: 10rpx;color: #6f7074;border-radius: 10rpx">
				{{packgeContent}}
			</view>
		</view>
		<!-- 		<view style="height: 100rpx;" class="middle">
			<view class="middleList">
				<view class="text">
					选择优惠券
				</view>
				<view style="width: 200rpx;color: black;" class="text2">
					-￥0.00>
				</view>
				
			</view>
		</view> -->
		<customForm :fields="fields" :formData.sync="formData"></customForm>

		<view style="margin-top: 20rpx;padding: 20rpx 0rpx 0rpx 20rpx;" class="middle">
			<text class="text">选择上传就医记录</text>

			<view
				style="display: flex;flex-direction: column;margin-top: 20rpx;padding: 20rpx 0rpx 0rpx 0rpx;width: 500rpx;"
				class="">
				<uni-section style="" type="">
					<view class="example-body custom-image-box">
						<uni-file-picker style="" limit="1" :del-icon="true" disable-preview :imageStyles="imageStyles"
							@select="select" @progress="progress" @success="success" @fail="fail"
							file-mediatype="image">+</uni-file-picker>
					</view>
				</uni-section>

			</view>
		</view>
		<view style="height: 120rpx;" class="middle" @click="$refs.bpopup.open()">
			<view class="middleList">
				<view class="text">
					备注
				</view>
				<view style="width: 100rpx;" class="text2" v-if="notes.length==0">
					选填<uni-icons type="right"></uni-icons>
				</view>
				<view style="width: 100rpx;" class="text2" v-else>
					{{notes}}
				</view>
			</view>
		</view>

		<view class="">
			<view style="position: fixed;top: 83%;" class="tt">
				<view class="middleList">
					<!-- <view class="text">
						打针消耗包
					</view> -->
					<view class="text">
						<!-- <radio-group style="display: flex;width: 450rpx;margin-top: 20rpx;" @change="payPersonRadioChange">
							<label v-for="(item, index) in payPerson1" :key="index" class="radio-label">
								<view  class="radio-item">
								  <radio :value="index + ''" color="#FF6000" :checked="index === payPersonIndex" />
								</view>
								
								<view style="width: 500rpx;" class="text-container">
								  <text :class="[index == payPersonIndex ? 'fontcolour' : '']">{{ item.value }}</text>
								  &nbsp;&nbsp;&nbsp;&nbsp;
								</view>
							</label>
					    </radio-group> -->
						<view class="radio-label" @click="onAgreementRadioChange">
							<radio color="#FF6000" :checked="isAgreement" />
							<view style="white-space: nowrap;width: 1400rpx;">
								已阅读并同意《<text style="color: #5EC7AA;"
									@click.stop="onToPrivacyAgreement(3)">平台服务协议</text>》
							</view>
						</view>
					</view>

				</view>
				<view class="fixed-bottom">
					<view class="middleList">
						<view class="text">
							合计 <span style="color: #ED783D;">￥{{originPrice*count+payPersonIndex*package.amount}}</span>

						</view>
						<view @click="toPay"
							style="color: black;width: 300rpx;height: 100rpx;background-color: #5EC7AA;display: flex;justify-content: center;align-items: center;border-radius: 50rpx;color: white;"
							class="text2">
							去支付
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popup-content">
				<view class="til">
					<view class="til_left" @click="cancel">取消</view>
					<view class="til_mid">情况描述</view>
					<view class="til_right" @click="confirm">确定</view>
				</view>
				<view class="contentArea">
					<view class="content">
						<textarea class="JTxtArea lg" :data-maxnum="reason.length+'/88'" @input="inputReason"
							placeholder="必填,请详细描述您的疑问、疾病或身体情况" :value="reason"></textarea>
						<view class="num">{{ reason.length }}/200</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="bpopup" type="bottom">
			<view class="popup-content">
				<view class="til">
					<view class="til_left" @click="$refs.bpopup.close();notes=''">取消</view>
					<view class="til_mid">备注</view>
					<view class="til_right" @click="bconfirm">确定</view>
				</view>
				<view class="contentArea">
					<view class="content">
						<textarea class="JTxtArea lg" :data-maxnum="notes.length+'/88'" placeholder=""
							v-model="notes"></textarea>
						<view class="num">{{ notes.length }}/200</view>
					</view>
				</view>
			</view>
		</uni-popup>


		<!-- <view class="uni-title uni-common-pl">日期选择器</view> -->
		<uni-popup ref="pickerView" type="bottom" style="z-index: 9999999;" class="picker">
			<popSituation @timer="timer"></popSituation>
			<view class="but">
				<button class="mini-btn" type="default" @click="cancelPickerView">取消</button>
				<button class="sure" @click="confirmData">确定</button>
			</view>

			<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker> -->
		</uni-popup>


	</view>
</template>

<script>
	import popSituation from './components/pop-situation/pop-situation.vue'
	import requestHttp from '@/providers/essential/httpService.js'
	import api from '@/providers/API/api.js'
	export default {
		components: {
			popSituation
		},


		data() {

			return {
				package:{},
				packgeContent:'',
				payPersonIndex:0,
				notes: '',
				formData: [],
				imageValue: '',
				dataList: {},
				isAgree: false,
				showDeleteIcon: false,
				picUrl: 'http://49.234.34.70:8083/admin-api/infra/file/5/get/20230815144028208NZyvKW.jpeg',
				archives: '请选择被护理人信息',
				serviceAddress: '请选择服务地址',
				serviceDateT: '',
				picker: false,
				serviceDate: '请选择服务时间',
				reason: '',
				isPop: true,
				count: 1,
				isAgreement: false,
				originPrice: uni.getStorageSync('salesPrice'),
				// payPerson1: [{
				// 				value: '已阅读并同意《平台服务协议》',
				// 				key: "0"
				// 			}],
				rules: {
					content: {
						rules: [{
							required: true,
							errorMessage: '请输入投诉内容',
						}]
					}
				},
				conf: {},
				fields: []
			}
		},
		computed: {

		},

		methods: {
			getConsumable(){
				requestHttp.getData('/magic/web/app/pz/consumable-package/get/2',{id:2}).then((res) => {
					this.package=res.data
					console.log(this.package)
					res.data.content= JSON.parse(res.data.content)
					res.data.content.forEach((item,index)=>{
						if(index==res.data.content.length-1){
							this.packgeContent+=item.name+'等'
						}else{
							this.packgeContent+=item.name+'、'
						}
					})
				})
			},
			getForm(e) {
				requestHttp.getData(api.getMiniBpmForm, {
					id: this.dataList.id
				}).then((res) => {
					this.conf = JSON.parse(decodeURIComponent(res.data.conf))
					for (let i = 0; i < res.data.fields.length; i++) {
						this.fields[i] = JSON.parse(decodeURIComponent(res.data.fields[i]))
					}
				})
			},
			toPrivacyAgreement(id) {
				uni.navigateTo({
					url: `/pages/accompany-tmp/my/privacyAgreement/privacyAgreement?id=${id}`
				});
			},
			timer(value) {
				this.serviceDateT = value
				console.log(value, 'value')
			},
			cancelPickerView() {
				this.$refs.pickerView.close();
			},
			confirmData() {
				this.serviceDate = this.serviceDateT
				this.$refs.pickerView.close();
			},
			showPicker() {
				this.$refs.pickerView.open();
			},
			onAgreementRadioChange() {
				this.isAgreement = !this.isAgreement;
			},
			onToPrivacyAgreement(id) {
				console.log(id, "id")
				uni.navigateTo({
					url: `/pages/accompany-tmp/my/privacyAgreement/privacyAgreement?id=${id}`
				});
			},
			select(e) {
				console.log('选择文件：', e)
				this.imageValue = e.tempFilePaths[0]
				let url = "/app-api/infra/file/upload"
				let data = {
					filePath: e.tempFilePaths[0],
					name: 'file'
				}
				requestHttp.uploadData(url, data).then((res) => {
					if (res.code == 0) {
						this.imageValue = res.data
					}
				})
			},
			confirm() {
				if (!this.reason) {
					uni.showToast({
						title: '输入内容不能为空！',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})

				}
				this.$refs.popup.close()
			},
			bconfirm() {
				if (!this.notes) {
					uni.showToast({
						title: '输入内容不能为空！',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})

				}
				this.$refs.bpopup.close()
			},
			toPay() {
				// 校验
				this.addReservation()
				// {
				//   "user_ip": "1",
				//   "amount": "1",
				//   "notify_time": "2023-08-24 20:48:50",
				//   "appointment_time": "2023-08-24 20:48:50",
				//   "refund_status": "1",
				//   "merchant_order_id": "1",
				//   "channel_user_id": "1",
				//   "subject": "1",
				//   "channel_fee_amount": "1",
				//   "expire_time": "2023-08-24 20:48:50",
				//   "channel_order_no": "1",
				//   "merchant_id": "1",
				//   "channel_code": "1",
				//   "success_time": "2023-08-24 20:48:50",
				//   "body": "1",
				//   "notify_url": "1",
				//   "notify_status": "1",
				//   "success_extension_id": "1",
				//   "refund_amount": "1",
				//   "channel_fee_rate": "1",
				//   "refund_count": "1",
				//   "app_id": "1",
				//   "channel_id": "1",
				//   "status": "1"
				// }
			},
			addReservation() {
				console.log(this.payPersonIndex,'index')
				let url = api.addReservation
				let param = {
					"service_pic_urls":this.picUrl,
					"user_ip": "1", //'用户 IP'
					"amount": this.originPrice*this.count+this.payPersonIndex*this.package.amount, //'价格'
					"notify_time": "2023-08-24 20:48:50", //'用户 IP'
					"appointment_time": "2023-08-24 20:48:50", //预约时间'
					"refund_status": "0", //'退款状态'
					"merchant_order_id": "1", //'商户订单编号'
					"channel_user_id": "1", //'渠道用户编号'
					"subject": this.dataList.title, //'商品标题'
					"channel_fee_amount": "0", //'渠道手续金额，单位：分',
					"expire_time": "2028-08-24 20:48:50", //'订单支付成功时间'
					"channel_order_no": "1", //'渠道订单号',
					"merchant_id": "1", //'商户编号'
					"channel_code": "wx_lite", //'渠道编码'
					"success_time": "2023-08-24 20:48:50", //'订单支付成功时间',
					"body": this.dataList.intro, //'商品描述'
					"notify_url": "https://scrm.caomei.zone/admin-api/pay/reservation/notify/callback/1", //'异步通知地址'
					"notify_status": "1", // '通知商户支付结果的回调状态'
					"success_extension_id": "1", //'支付成功的订单拓展单编号'
					"refund_amount": "1", //'退款总金额，单位：分',
					"channel_fee_rate": "1", //'渠道手续费，单位：百分比'
					"refund_count": "1", //'退款次数'
					"app_id": "1", //'应用编号'
					"channel_id": "1", //'渠道编号'
					"status": "0", //'支付状态'

					"service_address_id": uni.getStorageSync('tmpAddress').id||uni.getStorageSync('address').id, //地址id
					"care_id": uni.getStorageSync('tmpArchives').id||uni.getStorageSync('archives').id, //被护理人id
					"bpm_form_content": JSON.stringify(this.formData), //自定义表单
					"medical_record": this.imageValue, //就医记录
					"buy_count": this.count, //购买次数
					"situation_description": this.reason ,//情况描述
					"injection_consumption_bag_remark":this.notes,//备注
					"consumable_package_id":'2',//耗材包id
					"injection_consumption_bag":this.payPersonIndex,//耗材包是否需要
				}
				console.log(param, 'param')
				if (this.isAgreement) {
					if(param.service_address_id){
						if (param.care_id) {
							if (param.medical_record) {
								requestHttp.postData(url, param).then((res) => {
									this.handleClickSubmit(res.data.id)
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '请上传就医记录'
								})
							}
						}else{
							uni.showToast({
								icon: 'none',
								title: '请选择被护理人'
							})
						}
					}else{
						uni.showToast({
							icon: 'none',
							title: '请选择服务地址'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先同意协议'
					})
				}


			},
			handleClickSubmit(e) {
				let url = api.getPayParams
				let param = {
					id: e,
					channelCode: "wx_lite",
					channelExtras: {
						returnUrl: "https://scrm.caomei.zone/admin-api/pay/notify/callback/1",
						openid: "ovA7l5bi_KQyU9NZ_xUHHWgZUTOI",
					}
				}

				requestHttp.postData(url, param).then((res) => {
					if (res.code == 0) {
						const {
							appId,
							timeStamp,
							nonceStr,
							packageValue,
							signType,
							paySign
						} = res.data.invokeResponse;
						uni.requestPayment({
							timeStamp,
							nonceStr,
							package: packageValue,
							signType,
							paySign,
							success: function(res) {
								uni.showToast({
									icon: 'success',
									title: '支付成功'
								})
								uni.reLaunch({
									url: '/pages/accompany-tmp/order/order'
								})
							},
							fail: function(err) {
								uni.showToast({
									icon: 'fail',
									title: '支付失败'
								})
								uni.reLaunch({
									url: '/pages/accompany-tmp/order/order'
								})
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			cancel() {
				this.$refs.popup.close()
			},
			inputReason(e) {
				this.reason = e.detail.value;
			},
			submit() {
				this.$refs.form.validate().then(res => {
					if (res) {
						this.createSuggestion(res)
					}
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})


			},
			showPop() {
				this.$refs.popup.open()
			},
			toAddressList() {
				uni.navigateTo({
					url: '/pages/accompany-tmp/my/addressList/addressList'
				})
			},
			toAdrchivesList() {
				uni.navigateTo({
					url: '/pages/accompany-tmp/my/archivesList/archivesList'
				})
			},
			decrease() {
				if (this.count > 0) {
					this.count--;
				}
			},
			increase() {
				this.count++;
			},
			payPersonRadioChange(e) {
				
				this.payPersonIndex = e.detail.value
				console.log(this.payPersonIndex)
			},
		},
		
		onLoad(option) {
			uni.removeStorageSync('tmpAddress')
			uni.removeStorageSync('tmpArchives')
			console.log(option, 'option')
			this.dataList = JSON.parse(decodeURIComponent(option.dataList))
			this.picUrl = this.dataList.picUrls
			this.originPrice = this.dataList.salesPrice
			console.log(this.dataList)
			this.getForm()
			this.getConsumable()
			// 需要在onReady中设置规则
			// this.$refs.form.setRules(this.rules)

		},
		onShow() {
			console.log(uni.getStorageSync('tmpAddress'))
			console.log(uni.getStorageSync('tmpArchives'))
			this.serviceAddress = uni.getStorageSync('tmpAddress').detailAddress || uni.getStorageSync('address')
				.detailAddress || '请选择服务地址'

			if (uni.getStorageSync('tmpArchives')) {
				this.archives = uni.getStorageSync('tmpArchives') ? uni.getStorageSync('tmpArchives').name + ' ' + uni
					.getStorageSync('tmpArchives').age : '请选择被护理人信息'
			} else {
				this.archives = uni.getStorageSync('archives') ? uni.getStorageSync('archives').name + ' ' + uni
					.getStorageSync('archives').age : '请选择被护理人信息'
			}

		}


	}
</script>


<style lang="scss">
	.tt {
		width: 100%;
		height: 300rpx;
		background-color: #FFFFFF;
		margin: auto;
		border-radius: 20rpx;
	}

	.fixed-bottom {
		// flex: 0 0 100rpx;
		// position: fixed;
		// position: absolute;
		bottom: 0;
	}

	.radio-label {
		display: flex;
		align-items: center;
	}

	.radio-item {

		margin-right: 5px;
	}

	.text-container {
		display: flex;
		align-items: center;
	}

	.fontcolour {
		color: red;
	}

	.increase {
		width: 50rpx;
		height: 50rpx;
		border: 1px solid green;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.middle {
		width: 95%;
		height: 300rpx;
		background-color: #FFFFFF;
		margin: auto;
		border-radius: 20rpx;

		.uni-file-picker {
			position: relative;

			.deleteIcon {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 0 0 8rpx 8rpx;

			}
		}

	}

	.middleList {
		position: relative;
		display: flex;
		align-items: center;

		margin: 10px 0px;
		border-radius: 20rpx;
		line-height: 60rpx;

		// width: 80%;
		.text {
			width: 100%;
			// margin-top: 20rpx;
			padding: 20rpx 0rpx 0rpx 30rpx;


		}

		.text2 {
			position: absolute;
			right: 10rpx;
			color: #999999;
			width: 50%;
			text-align: right;
			margin-top: 20rpx;
			font-size: 30rpx;
			white-space: nowrap;
			/* 强制文本不换行 */
			text-overflow: ellipsis;
			/* 在超出部分显示省略号 */
			overflow: hidden;
			/* 控制超出部分的隐藏 */

		}

		.text3 {
			display: flex;
			position: absolute;
			right: 10rpx;
			top: 20rpx;
			// flex-direction: column;
		}


	}

	page {
		height: 150vh;
		background-color: #F6F7FA;
	}

	image {
		width: 180rpx;
		height: 180rpx;
	}

	.top {
		display: flex;
		padding: 20rpx;
		/* border:1px solid red; */
		width: 90%;
		margin: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.wenzi {
		margin-top: 10rpx;
		line-height: 80rpx;
		margin-left: 40rpx;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: relative;
		// background-color: rgba(255, 255, 255, 0.6);


		// justify-content: center;
		// padding: 15px;
		width: 100%;
		height: 100%;
		// padding-bottom: 40rpx;
		background-color: #fff;

		.til {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.til_left {
				flex: 20%;
				text-align: center;
			}

			.til_right {
				flex: 20%;
				text-align: center;
				color: #0ABA94;
			}

			.til_mid {
				flex: 60%;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
			}
		}

	}

	.checkBox {
		margin: 40rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.contentArea {

		height: calc(100vh - 200rpx);
		width: 100%;
		display: flex;
		// background-color: #F2F2F2;
		align-items: center;
		// justify-content: center;
		flex-direction: column;

		.content {
			position: relative;
			margin: 20rpx;
			// padding:20rpx;
			// width: 100%;
			height: 40%;
			background-color: #F2F2F2;
			border-radius: 5px;

			// width: calc(100% - 16px);
			.JTxtArea {
				padding: 20rpx;

				// box-sizing: border-box;padding: 8px;min-height: 60px;line-height: 20px;color: #000000;position: relative;&.sm{min-height: 30px;}&.lg{min-height: 100px;}&:after{content: attr(data-maxnum);position: absolute;right: 5px;bottom: 0px;font-size: 12px;color: $color-gray;}
			}

			.num {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				// text-align: right;
				color: gray;
				// margin:40rpx;
			}
		}
	}

	.picker {
		height: 100%;
		width: 100%;


	}

	.but {
		display: flex;
		align-items: center;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 100rpx;

		button {
			padding: 0 80rpx;
			// margin:10rpx;
			font-size: 28rpx;
		}

		.sure {
			background-color: #0ABA94;
			color: white;
		}
	}

	.rd {
		color: #0ABA94;
	}
</style>